<template>
    <div>
        <div v-if="isPlay">
            <navigation></navigation>
            <mu-container class="demo-container">
                <mu-row style="margin-bottom: 40px;"></mu-row>
                <mu-row gutter>
                    <mu-col span="12" sm="12" md="8" lg="8" xl="9">
                        <mu-col span="12">
                            <mu-row>
                                <mu-col span="12" sm="12" md="5" lg="4" xl="3"
                                        style="text-align: center; padding: 0 0 40px 0;">
                                    <mu-avatar :size="albumRotateSize"
                                               style="border: 2px solid rgba(26, 26, 26, 0.5); overflow: hidden; box-shadow: inset 0 0 20px 2px #000;">
                                        <img :class="albumRotate ? 'album album-rotate' : 'album'"
                                             :src="music.pictureUrl ? music.pictureUrl : require('../assets/images/logo.png')"
                                             :style="albumRotateStyle"
                                             alt="pic">
                                    </mu-avatar>
                                </mu-col>
                                <mu-col span="12" sm="12" md="7" lg="8" xl="9">
                                    <div style="font-size: 24px; font-weight: 400; margin: 4px 0 10px 0; min-height: 31px;">
                                        {{music ? music.name : ''}}
                                    </div>
                                    <div style="font-size: 16px; font-weight: 400; margin: 10px 0; min-height: 21px;">
                                        专辑: &nbsp;{{music.album ? '《' + music.album.name + '》' : ''}}
                                        歌手: &nbsp;{{music ? music.artist : ''}}
                                    </div>

                                    <div style="font-size: 14px; font-weight: 400; margin: 50px 0 10px 0; min-height: 21px;">
                                        {{lyric}}
                                    </div>
                                    <small id="musicEndTime" style="float: right">{{playerTime}}</small>
                                    <mu-linear-progress mode="determinate" :value="progress"
                                                        color="#009688"></mu-linear-progress>
                                    <mu-slider class="demo-slider" color="#009688" v-model="volume"
                                               style="color: rgb(0, 150, 136);"></mu-slider>
                                </mu-col>
                            </mu-row>
                        </mu-col>
                        <mu-col span="12">
                            <mu-data-table style="background-color: transparent" :selectable="false" :hover="false"
                                           :columns="columns" :data="pick">
                                <template slot-scope="scope">
                                    <td class="is-left">{{scope.$index + 1}}</td>
                                    <td class="is-left">{{isRoot||isAdmin? scope.row.name + `[${scope.row.id}]`:
                                        scope.row.name}}
                                    </td>
                                    <td class="is-center">{{scope.row.artist}}</td>
                                    <td class="is-center">{{'《' + scope.row.album.name+'》'}}</td>
<!--                                    <td class="is-center">{{scope.row.nickName + scope.row.sessionId?`[${scope.row.sessionId}]`: '[]'}}</td>-->
                                    <td class="is-center">{{isRoot||isAdmin ? scope.row.nickName + (scope.row.sessionId ? `[${scope.row.sessionId}]` : '') : scope.row.nickName}}</td>
                                </template>
                            </mu-data-table>
                        </mu-col>
                    </mu-col>
                    <mu-col span="12" sm="12" md="4" lg="4" xl="3">
                        <mu-col :style="screenWidth < 766 && screenWidth !== 0 ? 'margin: 100px 0 0 0;': ''">
                            <div style="font-size: 24px; font-weight: 400; margin: 4px 0 10px 0; min-height: 31px;">
                                实时聊天
                            </div>
                            <div style="font-size: 16px; font-weight: 400;">在线人数: {{online}}</div>
                            <div id="chat-container">
                                <div v-for="(item, index) in chatData"
                                     :style="item.type==='notice'?'text-align: center':''" style="padding: 10px 0">
                                    <div>
                                        <small class="chat-data-user">{{(isRoot||isAdmin) && item.type==='chat'?
                                            item.nickName + `[${item.sessionId}]`: item.nickName}}</small>
                                    </div>
                                    <div v-if="item.type==='notice'">
                                        <span class="chat-data-notice">{{item.content}}</span>
                                    </div>
                                    <div v-if="item.type==='chat'" class="chat-data-content">
                                        <span>{{item.content}}</span>
                                        <img v-if="item.images.length > 0" v-for="(img, index) in item.images" :src="img" alt="" style="max-width: 100px; display: block">
                                    </div>
                                </div>
                            </div>
                            <div :class="screenWidth < 766 && screenWidth !== 0 ? 'message-input-group': ''">
                                <mu-text-field :value="chatMessage"
                                               @input="updateChatMessage"
                                               @keydown.enter="sendHandler"
                                               placeholder="Message..."
                                               color="primary"
                                               class="width-size-100 chat-message"></mu-text-field>
                                <br/>
                                <mu-button v-if="!isContented" @click="connect" color="primary" style="width: 100%">
                                    连接服务器
                                </mu-button>
                                <mu-button v-if="isContented" @click="sendHandler" color="primary" style="width: 100%">
                                    发送消息
                                </mu-button>
                            </div>
                        </mu-col>
                        <mu-col style="margin-bottom: 160px; ">
                            <div style="padding: 10px 0">
                                <mu-divider></mu-divider>
                                <div style="padding: 10px 0">
                                    <mu-chip color="rgba(0, 150, 136, 0.5)" @click="openPictureSearch=!openPictureSearch">
                                        搜索图片
                                    </mu-chip>
                                    <mu-chip color="rgba(0, 150, 136, 0.5)" @click="musicSkipVote">
                                        投票切歌
                                    </mu-chip>
                                    <mu-chip color="rgba(0, 150, 136, 0.5)" @click="openSearch=!openSearch">
                                        搜索音乐
                                    </mu-chip>
                                    <mu-chip color="rgba(0, 150, 136, 0.5)" v-if="isRoot||isAdmin" @click="refreshPlaylist">
                                        刷新歌单
                                    </mu-chip>
                                </div>
                                <p>提示：输入 “<span style="color: #009688;">点歌 歌名</span>” 即可点歌。</p>
                                <p>例如：<span style="color: #009688;">点歌 春夏秋冬</span></p>
                                <p>支持输入网易云音乐 ID 点歌</p>
                                <p>没有想要点的音乐？ 快试一试 “<span @click="openSearch=!openSearch" style="cursor: pointer; color: #009688;">[搜索音乐]</span>” 吧</p>
                                <br/>
                                <p>如遇不好听的歌可以输入 “<span style="color: #009688;">投票切歌</span>” 或者点击 “<span @click="musicSkipVote" style="cursor: pointer; color: #009688;">[投票切歌]</span>”，当投票人数大于在线人数 30% 时将会切歌。</p>
                                <br/>
                                <p>输入 “<span style="color: #009688;">设置昵称 名字</span>” 可以设置自己的显示昵称，仅限当前客户端有效。</p>
                                <p>想要斗图？ ┏ (゜ω゜)=☞ “<span @click="openPictureSearch=!openPictureSearch" style="cursor: pointer; color: #009688;">[搜索图片]</span>”</p>
                                <br/>
                                <p>如果有什么好的想法、建议或问题可以单项向管理员发送消息，（＾∀＾●）ﾉｼ “<span style="color: #009688;">@管理员 内容</span>”, 空格隔开哦!</p>
                                <p>另外也可以在项目仓库开个 issue 进行公开讨论</p>
                            </div>
                        </mu-col>
                    </mu-col>
                </mu-row>
            </mu-container>
            <div id="blur" style="opacity: 0.4">
                <img :src="music.pictureUrl" alt="blur-img">
            </div>
            <div>
                <audio id="music" :src="music.url" @timeupdate="musicTimeUpdate" controls="" autoplay="autoplay"
                       style="display: none"></audio>
            </div>
        </div>
        <div id="play" v-if="!isPlay" style="position: fixed; width: 100%; height:100%">
            <mu-icon @click="play" value="play_circle_filled" color="primary" size="150"
                     style="position: fixed; top: calc(50% - 75px); left: calc(50% - 75px); cursor: pointer;"></mu-icon>
        </div>
        <mu-dialog id="search" width="auto" :open.sync="openSearch">
            <mu-container>
                <mu-row>
                    <mu-col span="11">
                        <mu-text-field :value="searchKeyword"
                                       @input="updateSearchKeyword"
                                       @keydown.enter="search"
                                       placeholder="请输入关键字搜索..."
                                       color="#009688"
                                       class="width-size-100" style="text-align: center"></mu-text-field>
                    </mu-col>
                    <mu-col span="1">
                        <mu-button class="search_btn" icon @click="search">
                            <mu-icon value="search"></mu-icon>
                        </mu-button>
                    </mu-col>
                </mu-row>
                <mu-row>
                    <mu-data-table style="background-color: transparent" :selectable="false" :hover="false"
                                   :columns="searchColumns" :data="searchData">
                        <template slot-scope="scope">
                            <td class="is-left">{{scope.$index + 1}}</td>
                            <td class="is-left">{{scope.row.name}}
                            </td>
                            <td class="is-center">{{scope.row.artist}}</td>
                            <td class="is-center">{{'《' + scope.row.album.name+'》'}}</td>
                            <td class="is-center">{{formatterTime(scope.row.duration/1000)}}</td>
                            <td class="is-center">
                                <a v-if="showPickButton(scope.row.privilege)" class="search_pick_btn" @click="pickMusic(scope.row)">点歌</a>
                                <mu-tooltip v-if="!showPickButton(scope.row.privilege)" content="当前音乐不能点播">
                                    <a v-if="" class="search_pick_btn_disable">点歌</a>
                                </mu-tooltip>
                            </td>
                        </template>
                    </mu-data-table>
                </mu-row>
                <mu-row>
                    <mu-flex justify-content="center">
                        <mu-pagination :total="searchCount" :current.sync="current" :page-count="pageCount" :page-size="limit" @change="paginationChange"></mu-pagination>
                    </mu-flex>
                </mu-row>
            </mu-container>
        </mu-dialog>
        <mu-dialog id="search-picture" width="auto" :open.sync="openPictureSearch">
            <chat-search-picture></chat-search-picture>
        </mu-dialog>
    </div>
</template>

<script>

    import {mapGetters, mapMutations} from 'vuex'
    import SockJS from 'sockjs-client'
    import Stomp from 'stompjs'
    import {sendUtils, messageUtils, timeUtils, musicUtils} from '../utils'
    import {baseUrl, isProduction} from "../config/environment";
    import Navigation from '../components/Navigation'
    import ChatSearchPicture from '../components/ChatSearchPicture'

    export default {
        name: "Music",
        components: {
            Navigation,
            ChatSearchPicture
        },
        computed: {
            ...mapGetters({
                isContented: 'getIsConnected',
                online: 'getSocketOnline',
                chatMessage: 'getChatMessage',
                chatData: 'getChatData',
                music: 'getPlayerMusic',
                progress: 'getPlayerProgress',
                playerTime: 'getPlayerTime',
                // volume: 'getPlayerVolume',
                pick: 'getPlayerPick',
                lyric: 'getPlayerLyric',
                isRoot: 'isSocketRoot',
                isAdmin: 'isSocketAdmin',
                searchKeyword: 'getSearchKeyword',
                searchData: 'getSearchData',
                searchCount: 'getSearchCount'
            }),
            ...mapMutations({
                // volume: 'setPlayerVolume'
            }),
            volume: {
                get: function () {
                    return this.$store.getters.getPlayerVolume;
                },
                set: function (value) {
                    music.volume = Number(value) / 100;
                    this.$store.commit('setPlayerVolume', value);
                }
            }
        },
        data: () => ({
            isPlay: false,
            columns: [
                {title: 'ID', name: 'id', width: 80, align: 'left'},
                {title: '歌曲', name: 'name', width: 200, align: 'left'},
                {title: '歌手', name: 'calories', align: 'center'},
                {title: '专辑', name: 'fat', align: 'center'},
                {title: '点歌人', name: 'carbs', align: 'center'},
            ],
            albumRotate: false,
            screenWidth: document.documentElement.clientWidth,
            albumRotateSize: 300,
            albumRotateStyle: '',
            openSearch: false,
            searchColumns: [
                {title: 'ID', name: 'id', width: 80, align: 'left'},
                {title: '歌曲', name: 'name', width: 200, align: 'left'},
                {title: '歌手', name: 'artist', align: 'center'},
                {title: '专辑', name: 'album', align: 'center'},
                {title: '时长', name: 'duration', align: 'center'},
                {title: '操作', name: 'op', align: 'center'}
            ],
            keyword: '',
            current: 1,
            limit: 10,
            pageCount: 7,
            openPictureSearch: false,
        }),
        methods: {
            play: function () {
                this.getScreenWidth();
                this.isPlay = !this.isPlay;
                this.connect();
            },
            connect: function () {
                let _this = this;
                let socketClient = this.$store.getters.getSocketClient;
                let stompClient = this.$store.getters.getStompClient;

                socketClient = new SockJS(baseUrl + '/server');
                stompClient = Stomp.over(socketClient);

                if (isProduction) {
                    stompClient.debug = () => {};
                }
                stompClient.connect({}, (frame) => {

                    // console.log('连接到服务器成功！', frame);
                    this.$store.commit('setSocketIsConnected', true);

                    // pre onmessage
                    let afterOnMessage = socketClient.onmessage;
                    socketClient.onmessage = function (message) {
                        _this.messageHandler(message);
                        afterOnMessage(message);
                    };

                    // pre onclose
                    let afterOnclose = socketClient.onclose;
                    socketClient.onclose = function (e) {
                        if (e.type === 'close') {
                            _this.$store.commit('setSocketIsConnected', false);
                            _this.$store.commit('pushChatData', {
                                type: 'notice',
                                content: '网络异常, 请尝试重新连接服务器!'
                            });
                            _this.$toast.error('网络异常, 请尝试重新连接服务器!')
                        }
                        afterOnclose(e);
                    };

                    let userName = window.localStorage.getItem('USER_NAME');
                    if (userName) {
                        this.settingName(userName);
                    }

                    this.subscribe();

                }, (error) => {
                    // console.log('连接到服务器失败！', error);
                });

                this.saveSocket(socketClient, stompClient);
            },
            close: function () {
                let socketClient = this.$store.getters.getSocketClient;
                let stompClient = this.$store.getters.getStompClient;

                stompClient.disconnect();
                socketClient.close();

                this.saveSocket(socketClient, stompClient);
            },
            subscribe: function () {
                let stompClient = this.$store.getters.getStompClient;

                stompClient.subscribe('/topic/chat', (response) => {
                    // console.log('来自 /topic/chat 频道的消息', response);
                    this.$store.commit('pushChatData', JSON.parse(response.body).data)
                });

                stompClient.subscribe('/topic/music/order', (response) => {
                    // console.log('来自 /topic/music/order 频道的消息', response);
                });

                this.saveSocket(null, stompClient);
            },
            saveSocket: function (socketClient, stompClient) {
                if (socketClient !== null) {
                    this.$store.commit('setSocketClient', socketClient);
                }
                if (stompClient !== null) {
                    this.$store.commit('setStompClient', stompClient);
                }
            },
            sendHandler: function () {
                // console.log('消息发送处理器');
                let stompClient = this.$store.getters.getStompClient;
                let chatMessage = this.$store.getters.getChatMessage;

                let instruction = sendUtils.parseInstruction(chatMessage);
                let content = '';

                switch (instruction) {
                    case '点歌':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入音乐关键词', chatMessage)
                        } else {
                            stompClient.send('/music/pick', {}, JSON.stringify({
                                name: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '投票切歌':
                        this.musicSkipVote();
                        break;
                    case '设置昵称':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入昵称', chatMessage)
                        } else {
                            this.settingName(content);
                        }
                        break;
                    case 'root':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入 root 密码', chatMessage)
                        } else {
                            stompClient.send('/auth/root', {}, JSON.stringify({
                                password: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case 'admin':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入 admin 密码', chatMessage)
                        } else {
                            stompClient.send('/auth/admin', {}, JSON.stringify({
                                password: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '置顶音乐':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入要置顶的音乐 id', chatMessage)
                        } else {
                            stompClient.send('/music/top', {}, JSON.stringify({
                                id: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '删除音乐':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入要删除的音乐 id', chatMessage)
                        } else {
                            stompClient.send('/music/delete', {}, JSON.stringify({
                                id: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '拉黑用户':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入要拉黑的用户 session', chatMessage)
                        } else {
                            stompClient.send('/chat/black', {}, JSON.stringify({
                                sessionId: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '漂白用户':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入要漂白的用户 session', chatMessage)
                        } else {
                            stompClient.send('/chat/unblack', {}, JSON.stringify({
                                sessionId: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '拉黑音乐':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入要拉黑的音乐 id', chatMessage);
                        } else {
                            stompClient.send('/music/black', {}, JSON.stringify({
                                id: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '漂白音乐':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                        } else {
                            // console.log('请输入要漂白的音乐 id', chatMessage);
                            stompClient.send('/music/unblack', {}, JSON.stringify({
                                id: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '@管理员':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                        } else {
                            stompClient.send('/mail/send', {}, JSON.stringify({
                                content: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    case '刷新歌单':
                        this.refreshPlaylist();
                        break;
                    case '切换歌单':
                        content = sendUtils.parseContent(instruction, chatMessage);
                        if (content === '') {
                            // console.log('请输入要切换的歌单 id', chatMessage);
                        } else {
                            stompClient.send('/playlist/modify', {}, JSON.stringify({
                                id: content,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                    default:
                        if (chatMessage === null || chatMessage === '' || chatMessage.length === 0) {
                            // console.log('消息非法', chatMessage);
                        } else {
                            stompClient.send('/chat', {}, JSON.stringify({
                                content: chatMessage,
                                sendTime: Date.now()
                            }));
                        }
                        break;
                }

                this.$store.commit('setChatMessage', '');
            },
            messageHandler: function (source) {
                // console.log('消息处理器收到消息', source);
                if (messageUtils.isKnowMessageType(source.data)) {
                    let messageType = messageUtils.parseMessageType(source.data);
                    let messageContent = messageUtils.parseMessageContent(source.data);
                    switch (messageType) {
                        case messageUtils.messageType.ONLINE:
                            if (messageContent.data.count !== undefined
                                && typeof (messageContent.data.count) !== 'undefined'
                                && messageContent.data.count !== null
                                && messageContent.data.count !== '') {
                                this.$store.commit('setSocketOnline', messageContent.data.count);
                            }
                            break;
                        case messageUtils.messageType.NOTICE:
                            if (messageContent.message !== undefined
                                && typeof (messageContent.message) !== 'undefined'
                                && messageContent.message !== null
                                && messageContent.message !== '') {
                                this.$store.commit('pushChatData', {
                                    content: messageContent.message,
                                    type: 'notice'
                                });
                            }
                            break;
                        case messageUtils.messageType.CHAT:
                            // parse picture
                            let imgList = [];
                            let matchUrlList = messageContent.data.content.match(/[picture]+:[http|https]+:\/\/[^\s]*/gi);
                            if (matchUrlList !== null) {
                                for (let i = 0; i < matchUrlList.length; i++) {
                                    imgList.push(matchUrlList[i].replace('picture:', ''));
                                    messageContent.data.content = messageContent.data.content.replace(matchUrlList[i], '');
                                }
                            }
                            messageContent.data.images = imgList;
                            this.$store.commit('pushChatData', messageContent.data);
                            break;
                        case messageUtils.messageType.PICK:
                            this.$store.commit('setPlayerPick', messageContent.data);
                            break;
                        case messageUtils.messageType.MUSIC:
                            this.$store.commit('setPlayerMusic', messageContent.data);
                            if (messageContent.data.lyric === undefined
                                || typeof (messageContent.data.lyric) === 'undefined'
                                || messageContent.data.lyric === null
                                || messageContent.data.lyric === '') {
                                this.$store.commit('setPlayerLyrics', []);
                            } else {
                                this.$store.commit('setPlayerLyrics', musicUtils.parseLyric(messageContent.data.lyric));
                            }
                            break;
                        case messageUtils.messageType.AUTH_ROOT:
                            this.$store.commit('pushChatData', {
                                content: messageContent.message,
                                type: 'notice'
                            });
                            if (Number(messageContent.code) === 20000) {
                                this.$store.commit('setSocketRoot', true);
                                // console.log('root success')
                            }
                            break;
                        case messageUtils.messageType.AUTH_ADMIN:
                            this.$store.commit('pushChatData', {
                                content: messageContent.message,
                                type: 'notice'
                            });
                            if (Number(messageContent.code) === 20000) {
                                this.$store.commit('setSocketAdmin', true);
                                // console.log('admin success')
                            }
                            break;
                        case messageUtils.messageType.SETTING_NAME:
                            this.$store.commit('pushChatData', {
                                content: messageContent.message,
                                type: 'notice'
                            });
                            this.$store.commit('setSocketUserName', messageContent.data.name);
                            break;
                        case messageUtils.messageType.SEARCH:
                            this.$store.commit('setSearchCount', messageContent.data.totalSize);
                            this.$store.commit('setSearchData', messageContent.data.data);
                            break;
                        case messageUtils.messageType.SEARCH_PICTURE:
                            this.$store.commit('setSearchPictureCount', messageContent.data.totalSize);
                            this.$store.commit('setSearchPictureData', messageContent.data.data);
                            break;
                        case messageUtils.messageType.PLAYLIST:
                            if (messageContent.message !== undefined
                                && typeof (messageContent.message) !== 'undefined'
                                && messageContent.message !== null
                                && messageContent.message !== '') {
                                this.$store.commit('pushChatData', {
                                    content: messageContent.message,
                                    type: 'notice'
                                });
                            }
                        default:
                            // console.log('未知消息类型', messageType, source);
                            break;
                    }
                }
            },
            updateChatMessage: function (value) {
                this.$store.commit('setChatMessage', value);
            },
            updateSearchKeyword: function (value) {
                this.$store.commit('setSearchKeyword', value);
            },
            settingName: function (name) {
                let stompClient = this.$store.getters.getStompClient;
                stompClient.send('/setting/name', {}, JSON.stringify({
                    name: name,
                    sendTime: Date.now()
                }));
            },
            search: function () {
                let stompClient = this.$store.getters.getStompClient;
                stompClient.send('/music/search', {}, JSON.stringify({
                    name: this.$store.getters.getSearchKeyword,
                    sendTime: Date.now(),
                    pageIndex: this.current,
                    pageSize: this.limit
                }));
            },
            paginationChange: function(page) {
                this.current = page;
                this.search()
            },
            pickMusic: function(row) {
                let stompClient = this.$store.getters.getStompClient;
                stompClient.send('/music/pick', {}, JSON.stringify({
                    name: row.id,
                    sendTime: Date.now()
                }));
                this.$toast.message(`[${row.id}]${row.name} - 已发送点歌请求`);
            },
            showPickButton(value) {
                if (Number(value.st) < 0) {
                    // 没有资源
                    return false;
                } else if (Number(value.fl) === 0) {
                    // 可能需要付费
                    return false;
                }
                return true
            },
            musicSkipVote: function () {
                let stompClient = this.$store.getters.getStompClient;
                stompClient.send('/music/skip/vote', {}, {});
            },
            refreshPlaylist: function() {
                let stompClient = this.$store.getters.getStompClient;
                stompClient.send('/playlist/update', {}, {});
            },
            musicTimeUpdate: function (e) {
                // progress
                let currentTime = e.target.currentTime;
                let duration = e.target.duration;
                this.$store.commit('setPlayerProgress', (currentTime / duration) * 100);

                // show time
                let usedTimeHH_mm_ss = timeUtils.secondsToHH_mm_ss(currentTime);
                let durationHH_mm_ss = timeUtils.secondsToHH_mm_ss(duration);
                let time = usedTimeHH_mm_ss + ' / ' + durationHH_mm_ss;
                this.$store.commit('setPlayerTime', time);

                // lyric
                let lyrics = this.$store.getters.getPlayerLyrics;
                if (lyrics.length === 0) {
                    this.$store.commit('setPlayerLyric', '暂无歌词');
                } else {
                    let number = Number(currentTime.toFixed());
                    if (lyrics[number] !== undefined && lyrics[number] !== '') {
                        this.$store.commit('setPlayerLyric', lyrics[number]);
                    }
                }
            },
            getScreenWidth: function () {
                const _this = this;
                window.onresize = () => {
                    return (() => {
                        _this.screenWidth = document.documentElement.clientWidth;
                    })()
                };
            },
            formatterTime: function(value) {
                return timeUtils.secondsToHH_mm_ss(value)
            }
        },
        watch: {
            '$store.state.player.music': function (newValue, oldValue) {
                let _this = this;
                this.albumRotate = false;
                document.querySelector('#music').volume = Number(this.$store.getters.getPlayerVolume) / 100;
                // 解决部分移动端不能自动播放
                document.addEventListener('touchstart', function () {
                    document.querySelector('#music').play();
                });
                setTimeout(function () {
                    _this.albumRotate = true;
                    document.querySelector('#music').currentTime = (Date.now() - newValue.pushTime) / 1000;
                }, 1000)
            },
            '$store.state.chat.data': function (newValue, oldValue) {
                setTimeout(function () {
                    let chat = document.querySelector('#chat-container');
                    chat.scrollTop = chat.scrollHeight;
                }, 100)
            },
            screenWidth(val) {
                //监控浏览器高度变化
                if (!this.timer) {
                    this.screenWidth = val;
                    this.timer = true;
                    let _this = this;
                    setTimeout(function () {
                        _this.timer = false
                    }, 400)
                }
                if (val <= 400) {
                    this.albumRotateStyle = 'border:60px solid rgb(12, 12, 12); padding: 8px;';
                    this.pageCount = 1
                }
                if (val > 400 && val <= 766) {
                    this.albumRotateSize = 450;
                    this.albumRotateStyle = 'border:70px solid rgb(12, 12, 12); padding: 8px;';
                    this.pageCount = 3
                }
                if (val > 766 && val < 1000) {
                    this.albumRotateSize = 160;
                    this.albumRotateStyle = 'border:32px solid rgb(12, 12, 12); padding: 4px;';
                }
                if (val >= 1000) {
                    this.albumRotateSize = 200;
                    this.albumRotateStyle = 'border:40px solid rgb(12, 12, 12); padding: 4px;';
                }
            }
        },
        mounted() {
            this.getScreenWidth()
        },
        created() {
            // let val = this.albumRotateSize;
            let val = document.documentElement.clientWidth;
            // console.log(val);

            if (val <= 400) {
                this.pageCount = 1
            }
            if (val > 400 && val <= 700) {
                this.albumRotateSize = val - 60;
                this.albumRotateStyle = `border:${Math.floor(val / 10) + 10}px solid rgb(12, 12, 12);`;
                this.pageCount = 3
            }
            if (val > 700 && val <= 766) {
                this.albumRotateSize = 450;
                this.albumRotateStyle = 'border:70px solid rgb(12, 12, 12);';
            }
            if (val > 766 && val < 1000) {
                this.albumRotateSize = 160;
                this.albumRotateStyle = 'border:32px solid rgb(12, 12, 12);';
            }
            if (val >= 1000) {
                this.albumRotateSize = 200;
                this.albumRotateStyle = 'border:40px solid rgb(12, 12, 12);';
            }
        }
    }
</script>

<style lang="scss" scoped>
    .demo-container {
        .row {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .album {
        width: 100%;
        display: inline-block;
        cursor: pointer;
        transition-duration: 0.2s;
        padding: 4px;
        border: 32px solid rgb(16, 16, 16);;
        border-radius: 50%;
        background: linear-gradient(rgb(39, 39, 39), rgb(0, 0, 0), rgb(0, 0, 0), rgb(39, 39, 39));
        /*box-shadow: 0 0 20px 2px #000;*/
    }

    .album-rotate {
        animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(360deg)
        }
    }
</style>
